<template>
		<view class="content">
			<view class="top_box">
					<view class="top1 flexs2">
						<image class="up_img" src="../../static/img/@dfsedfes.png" mode="" @click="picture.allblack()"></image>
						<view class="titles">我的钱包</view>
						<view class="status"></view>
					</view>
					<view class="money_box">
						<view class="top_money">{{Info}}</view>
						<view class="money_tip">钱包余额(元)</view>
					</view>
					<view class="box_btn" @click="goRecharge">充值</view>
			</view>
			<view class="list_box">
				<view class="list_box_item" @click="goRe_del">
					<image src="../../static/img/dfdsfdfdd.png" mode=""></image>
					<view class="list_item_r">
						<view class="list_item_title">收入明细</view>
						<image src="../../static/img/left.png" mode=""></image>
					</view>
				</view>
				<view class="list_box_item" @click="goWith_del">
					<image src="../../static/img/ffgfdrrfrgf.png" mode=""></image>
					<view class="list_item_r">
						<view class="list_item_title">支出明细</view>
						<image src="../../static/img/left.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
</template>

<script>
	import {getMoney} from '@/api/personal.js'
	export default {
		data() {
			return {
				Info:''
			}
		},
		onLoad() {
			this.getInfo()
		},
		onShow() {
			this.getInfo()
		},
		methods: {
			goRe_del(){
				uni.navigateTo({
					url:'Recharge_det'
				})
			},
			goWith_del(){
				uni.navigateTo({
					url:'With_det'
				})
			},
			goRecharge(){
				uni.navigateTo({
					url:'Recharge'
				})
			},
			getInfo(){
				var obj = {
				};
				getMoney(obj).then(res => {
					if (res.code == 1) {
							this.Info = res.data
					}
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	
.content{
		width: 100%;
	    height: 100vh;
		background: #F5F5F5;
	    overflow-y: auto;
	.top_box{
		height: 336rpx;
		    width: 100%;
		    background-image: url(../../static/img/wdqb_img_bg@2x.757d31a1.png);
		    background-size: 100% 100%;
		.top1{
			width: 100%;
			    height: 88rpx;
			    padding: 26rpx;
			.up_img{
				width: 20rpx;
				    height: 36rpx;
				}
				
			.titles{
				font-size: 34rpx;
				color: #fff;
				}
			}
			.money_box{
				width: 100%;
				    height: 100rpx;
				    display: flex;
				    justify-content: center;
				    align-items: center;
				    flex-direction: column;
				    margin-top: 74rpx;
				.top_money{
					font-size: 60rpx;
					    font-family: PingFang SC;
					    font-weight: 700;
					    color: #fff;
				}
				.money_tip{
					font-size:26rpx;
					    font-family: PingFang SC;
					    font-weight: 500;
					    color: #fff;
				}
			}
			.box_btn{
				width: 306rpx;
				    height: 80rpx;
				    background: #fff;
				    box-shadow: 0 2rpx 16rpx 0 #b8b8b8;
				    border-radius: 40rpx;
				    margin: auto;
				    display: flex;
				    justify-content: center;
				    align-items: center;
				    margin-top: 30rpx;
				    font-size: 30rpx;
				    font-family: PingFang SC;
				    font-weight: 500;
				    color: #fcb630;
					position: absolute;
					left: calc(50% - 153rpx);
				}
	}
	.list_box{
		width: 92%;
		    height: 200rpx;
		    background: #fff;
		    box-shadow: 0 2rpx 16rpx 0 #b8b8b8;
		    border-radius: 10rpx;
		    margin: auto;
		    margin-top: 82rpx;
		    padding: 0 20rpx;
			.list_box_item{
				width: 100%;
				    height: 98rpx;
				    display: flex;
				    justify-content: space-between;
				    align-items: center;
					image{
						width: 44rpx;
						    height: 46rpx;
					}
					.list_item_r{
						width: 88%;
						    height: 100%;
						    display: flex;
						    justify-content: space-between;
						    align-items: center;
						    border-bottom: 1rpx solid #f5f5f5;
						.list_item_title{
							
						}
						image{
							width: 12rpx;
							    height: 22rpx;
						}
					}
			}
		}
	}
</style>
